<template>
  <div class="notice-demo">
    <h3 class="title">普通的通知</h3>
    <div>
      <d-button @click="vueInfo">vue调用提示</d-button>
    </div>
    <h3 class="title">不同类型的通知</h3>
    <div>
      <h5 class="sub-title">普通通知</h5>
      <div>
        <d-button color="blue" @click="notice('info')">消息</d-button>
        <d-button color="green" @click="notice('success')">成功</d-button>
        <d-button color="yellow" @click="notice('warn')">警告</d-button>
        <d-button color="red" @click="notice('error')">错误</d-button>
        <d-button color="primary" icon="d-icon-bell" @click="noticeIcon(false)">自定义Icon</d-button>
      </div>
      <h5 class="sub-title">标题通知</h5>
      <div>
        <d-button color="blue" @click="noticeTitle('info')">消息</d-button>
        <d-button color="green" @click="noticeTitle('success')">成功</d-button>
        <d-button color="yellow" @click="noticeTitle('warn')">警告</d-button>
        <d-button color="red" @click="noticeTitle('error')">错误</d-button>
        <d-button color="primary" icon="d-icon-bell" @click="noticeIcon(true)">自定义Icon</d-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'noticeDemo',
  methods: {
    vueInfo () {
      this.$Notice('这是一个普通的通知')
    },
    notice (type) {
      let text = { info: '消息', success: '成功', warn: '警告', error: '错误' }[type]
      this.$Notice[type](`这是一个${text}的通知`)
    },
    noticeIcon (hasTitle) {
      this.$Notice({
        icon: 'd-icon-bell',
        title: hasTitle ? '自定义通知' : '',
        content: `这是一个自定义Icon的通知`
      })
    },
    noticeTitle (type) {
      let text = { info: '消息', success: '成功', warn: '警告', error: '错误' }[type]
      this.$Notice({
        type,
        title: text,
        content: `这是一个${text}的通知`
      })
    }
  }
}
</script>
